<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能油田感知系统教学演示</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="css/style.css">
    
    <style>
        /* 图片样式 */
        .project-image {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin: 15px 0;
        }
        
        .image-caption {
            text-align: center;
            font-style: italic;
            color: #666;
            margin-bottom: 20px;
        }
        
        .image-container {
            text-align: center;
            margin: 20px 0;
        }
        
        /* 图片网格布局 */
        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .image-card {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            background-color: #f9f9f9;
        }
        
        /* 技术图示样式 */
        .tech-diagram {
            border: 1px solid #ccc;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <!-- 页面标题 -->
        <div class="row">
            <div class="col-12">
                <h1 class="text-center text-primary">智能油田感知系统</h1>
                <p class="text-center text-muted">基于功图量油与动液面计算的教学演示</p>
                <hr>
            </div>
        </div>

        <!-- 控制面板 -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>工况选择</h5>
                    </div>
                    <div class="card-body">
                        <select id="workingCondition" class="form-select">
                            <option value="normal">正常工况</option>
                            <option value="gas">气体影响</option>
                            <option value="leak">凡尔漏失</option>
                            <option value="pumpTrouble">泵故障</option>
                            <option value="rodBreak">抽油杆断脱</option>
                            <option value="wax">结蜡工况</option>
                            <option value="drift">载荷漂移</option>
                        </select>
                        <div class="mt-3">
                            <button id="analyzeBtn" class="btn btn-primary">分析工况</button>
                            <button id="calculateBtn" class="btn btn-success">计算参数</button>
                        </div>
                    </div>
                </div>
                
                <!-- 工况描述 -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5>工况描述</h5>
                    </div>
                    <div class="card-body">
                        <p id="conditionDescription" class="text-muted">正常工况：示功图形状规则，载荷变化平稳</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>实时数据看板</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <p><strong>工况诊断:</strong> <span id="diagnosisResult" class="text-success">正常</span></p>
                                <p><strong>产液量:</strong> <span id="liquidProduction">0</span> m³/d</p>
                            </div>
                            <div class="col-6">
                                <p><strong>动液面:</strong> <span id="fluidLevel">0</span> m</p>
                                <p><strong>泵效:</strong> <span id="pumpEfficiency">0</span> %</p>
                            </div>
                        </div>
                        
                        <!-- 故障提醒 -->
                        <div id="calculationAlert" class="alert alert-warning mt-2" style="display: none;">
                            <!-- 这里会显示故障提醒 -->
                        </div>
                    </div>
                </div>
                
                <!-- 计算过程与状态 -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5>计算过程与状态</h5>
                    </div>
                    <div class="card-body">
                        <!-- 计算过程显示 -->
                        <div class="mb-2">
                            <strong>数据处理:</strong> 
                            <span id="calculationProcess" style="display: none;" class="text-info"></span>
                        </div>
                        
                        <!-- 技术原理说明 -->
                        <div class="mt-3 p-2 bg-light rounded">
                            <small>
                                <strong>技术原理说明:</strong><br>
                                • <strong>功图量油</strong>: 基于示功图面积与泵效计算产液量<br>
                                • <strong>动液面计算</strong>: 基于力学模型：光杆载荷 = 杆柱重量 + 液柱重量 ± 惯性载荷<br>
                                • <strong>数据校正</strong>: 对漂移、结蜡等异常工况进行载荷校正
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 示功图显示区域 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>示功图显示</h5>
                    </div>
                    <div class="card-body">
                        <div id="dynagraphChart" style="width: 100%; height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 项目说明 -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>项目说明</h5>
                    </div>
                    <div class="card-body">
                        <p>本演示系统展示了如何通过示功图数据实现油井生产参数的实时感知与分析，严格按照工业实际流程设计。</p>
                        
                        <h6>核心功能流程：</h6>
                        <ol>
                            <li><strong>数据获取</strong> - 获取示功图数据并进行识别处理</li>
                            <li><strong>工况诊断</strong> - 识别断脱、漏失等故障工况</li>
                            <li><strong>数据校正</strong> - 对漂移、结蜡等异常进行载荷校正</li>
                            <li><strong>参数计算</strong> - 基于力学模型计算动液面和产液量</li>
                        </ol>
                        
                        <!-- 插入第一张图片：功图量油技术 -->
                        <div class="image-container">
                            <img src="images/dynograph_measurement.png" alt="功图量油技术原理图" class="project-image">
                            <p class="image-caption">图1:功图量油技术原理 - 基于示功图面积计算产液量</p>
                        </div>
                        
                        <p>功图量油技术通过在抽油机井口安装载荷-位移传感器，采集示功图数据。通过分析示功图的形状和面积，结合泵效模型，可以准确计算出油井的产液量，无需传统的分离计量设备。</p>
                        
                        <!-- 插入第二张图片：动液面折算流程 -->
                        <div class="image-container">
                            <img src="images/fluid_level_calibration.jpg" alt="动液面折算自动校准方法与流程" class="project-image">
                            <p class="image-caption">图2:动液面折算自动校准方法与流程</p>
                        </div>
                        
                        <p>动液面计算基于力学模型，通过分析示功图的载荷特征，结合油井参数，可以准确估算井下液面位置。系统会自动检测故障工况（如断脱、漏失），并在无法准确计算时给出提示。</p>
                        
                        <!-- 两张图片并排展示 -->
                        <h6 class="mt-4">技术原理对比：</h6>
                        <div class="image-grid">
                            <div class="image-card">
                                <img src="images/dynograph_measurement.png" alt="功图量油技术" class="project-image">
                                <p class="image-caption">功图量油技术原理</p>
                                <p class="small text-muted">通过示功图面积计算产液量，实现低成本实时计量</p>
                            </div>
                            <div class="image-card">
                                <img src="images/fluid_level_calibration.jpg" alt="动液面折算流程" class="project-image">
                                <p class="image-caption">动液面折算流程</p>
                                <p class="small text-muted">基于力学模型和工况诊断的动液面自动计算</p>
                            </div>
                        </div>
                        
                        <h6>技术优势：</h6>
                        <ul>
                            <li><strong>低成本感知</strong> - 仅需井口传感器，替代传统昂贵设备</li>
                            <li><strong>实时监测</strong> - 连续监测油井工况变化</li>
                            <li><strong>智能诊断</strong> - 自动识别故障并提醒</li>
                            <li><strong>非介入式</strong> - 不影响正常生产作业</li>
                            <li><strong>一机多用</strong> - 同一传感器实现多种参数计算</li>
                        </ul>
                        
                        <div class="tech-diagram mt-4">
                            <h6>系统工作流程：</h6>
                            <ol>
                                <li>传感器采集示功图数据（位移-载荷）</li>
                                <li>系统自动识别并剔除错误功图</li>
                                <li>诊断工况：检查是否断脱、漏失等故障</li>
                                <li>数据校正：对漂移、结蜡等异常进行校正</li>
                                <li>参数计算：基于力学模型计算动液面和产液量</li>
                                <li>结果展示：在数据看板显示计算结果和诊断信息</li>
                            </ol>
                        </div>
                        
                        <p class="text-muted small mt-3">
                            注：本系统为演示版本，基于实际工业流程简化实现。实际工业应用采用更复杂的数学模型和实时数据处理算法。
                            图片仅供参考，实际系统界面可能有所不同。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="row mt-4">
            <div class="col-12 text-center">
                <hr>
                <p class="text-muted">智能油田感知系统教学演示 &copy; 2025 | 石油工业与碳中和小组作业</p>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="js/script.js"></script>
</body>
</html>